<template>
  <div class="task-table">
    <div v-if="data.length > 0">
      <el-table
          :data="data"
          style="width: 100%"
          v-loading="loading">

        <el-table-column
            prop="title"
            label="任务名称">
        </el-table-column>

        <el-table-column
            prop="pushTime"
            label="创建时间"
            width="180">
        </el-table-column>

        <el-table-column
            prop="status"
            label="状态"
            width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="handleDetail(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="component-no_data" v-else>
      <div class="img-box">
        <el-image class="img" src="https://www.ketangpai.com/img/img_empty.84d0931c.png"></el-image>
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TaskTable',
  props: {
    data: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    getStatusType(status) {
      const statusMap = {
        'queued': 'info',
        'processing': 'warning',
        'completed': 'success',
        'error': 'danger'
      }
      return statusMap[status] || 'info'
    },
    handleDetail(row) {
      // 处理查看详情
      this.$emit('view-detail', row)
    }
  }
}
</script>

<style scoped>
.component-no_data {
  height: max-content;
  padding-top: 100px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #74787c;
  line-height: 24px;

  .img-box {
    padding-bottom: 12px;

    .img {
      height: 250px;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>